<template>
  <div>
    <div class="banner">
      <div
        class="
          w-1200-container
          h-full
          flex
          justify-center
          align-middle
          items-center
        "
      >
        <div
          class="
            text-5xl
            h-full
            text-white
            font-bold
            flex
            items-center
            justify-center
          "
        >
          独角兽/瞪羚企业自评测
        </div>
        <el-image
          class="pt-8 ml-40"
          style="width: 18.9375rem; height: auto"
          fit="contain"
          :src="require('@/assets/images/exam/selectionPageBanner.png')"
        >
          <div slot="placeholder">加载中<span class="dot">...</span></div>
        </el-image>
      </div>
    </div>

    <div
      class="
        w-1200-container
        p-16
        bg-white
        border-t-2 border-solid border-blue-600
        shadow-lg
      "
      style="width: calc(100% - 4px); margin: 0 auto; margin-bottom: 10rem"
    >
      <div class="py-2 head-box">
        <div class="head-title flex flex-col">
          <span class="text-lg" style="color: #3378fc">瞪羚企业测评</span>
          <span class="text-sm"
            >本测试根据<span class="font-bold"
              >2020年江西省瞪羚企业入选条件</span
            >设计，测试结果仅供参考！</span
          >
        </div>
      </div>
      <div
        class="mt-2 mb-6 border-b"
        style="margin-left: -3%; width: 106%"
      ></div>

      <div v-if="isMatchResShow">
        <div>
          <div class="match-error">
            <div class="title">评估结果</div>
            <div class="match-content">
              <div>
                <i
                  :class="[matchHeadObj.icon, matchHeadObj.color, 'text-6xl']"
                ></i>
              </div>
              <div class="text-t mt-4">
                您的企业<span class="font-bold" :class="matchHeadObj.color">{{
                  matchHeadObj.isSucess
                }}</span
                >{{ matchHeadObj.title }}的评选条件
              </div>
            </div>
          </div>

          <div class="error-list py-4">
            <div
              v-for="resItem in filterCheckForm"
              :key="'resItem' + resItem.uid"
              class="
                flex
                justify-between
                py-3
                px-2
                text-t333
                border-b
                cursor-pointer
                hover:bg-gray-100
              "
            >
              <div class="w-full flex justify-around items-center">
                <div class="flex-1">
                  <div v-if="resItem.uid == 9">（2）创新能力条件</div>
                  <div v-html="resItem.name"></div>
                </div>
                <span
                  :class="[matchResObj(resItem.vv)['color']]"
                  style="width: 5rem; text-align: right"
                >
                  <i :class="matchResObj(resItem.vv)['icon']"></i>
                  {{ matchResObj(resItem.vv)["title"] }}
                </span>
              </div>
            </div>
          </div>
          <div class="flex justify-center p-4">
            <el-button
              class="m-auto"
              type="primary"
              round
              @click="hiddenMatchRes"
              >重新评估</el-button
            >
          </div>

          <div class="mt-28">
            <div class="text-center text-xl font-bold my-4">
              江西省瞪羚企业申报评选标准（2020）
            </div>
            <div class="leading-8 text-t333 my-4">
              <div class="font-bold text-lg">1. 瞪羚企业</div>
              <div>
                <div>
                  指跨越死亡谷、进入高速成长期的创新创业企业，也被称为高成长企业。
                  需同时满足增长率与创新能力条件，具体为：
                </div>
                <div>（1）增长率条件（需满足以下条件之一）</div>
                <div class="pl-4 text-t666">
                  <div>
                    ①企业于2006年1月1日（含）之后注册，2016年营业收入≥1000万元，2016-2019年营业收入复合增长率≥20%，且2019年度正增长；
                  </div>
                  <div>
                    ②企业于2006年1月1日（含）之后注册，2016年雇员人数≥100人，2016-2019年雇员人数复合增长率≥30%，且2019年度正增长；
                  </div>
                  <div>
                    ③企业于2016年1月1日（含）之后注册，2019年营业收入≥5亿元，且2019年度正增长；
                  </div>
                  <div>
                    ④企业于2011年1月1日（含）之后注册，且2019年营业收入≥10亿元，且2019年度正增长。
                  </div>
                </div>
                <div>（2）创新能力条件</div>
                <div class="pl-4 text-t666">
                  2016-2019年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%（注册时间不足4年的，根据实际投入年份数据计算）。
                </div>
              </div>
            </div>
            <div class="leading-8 text-t333 my-4">
              <div class="font-bold text-lg">2. 潜在瞪羚企业</div>
              <div>
                <div>
                  指发展迅速，有希望快速成为瞪羚企业的创新型科技企业。需同时满足增长率与创新能力条件，具体为：
                </div>
                <div>（1）增长率条件（需满足以下条件之一）</div>
                <div class="pl-4 text-t666">
                  <div>
                    ①企业于2011年1月1日（含）之后注册，2017年营业收入≥500万，2017-2019年营业收入复合增长率≥20%，且2019年度正增长；
                  </div>
                  <div>
                    ②企业于2011年1月1日（含）之后注册，2017年雇员人数≥50人，2017-2019年雇员总数复合增长率≥30%，且2019年度正增长；
                  </div>
                  <div>
                    ③企业于2018年1月1日（含）之后注册，且2019年营业收入≥1亿元，且2019年度正增长；
                  </div>
                  <div>
                    ④企业于2016年1月1日（含）之后注册，且2019年营业收入≥3亿元，且2019年度正增长。
                  </div>
                </div>
                <div>（2）创新能力条件</div>
                <div class="pl-4 text-t666">
                  2017—2019年平均研究与试验发展（R&D）经费投入强度（即R&D经费占营业收入的比例）≥2.5%（注册时间不足3年的，根据实际投入年份数据计算）。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else>
        <el-form
          ref="evaluaForm"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="self-form mt-4"
        >
          <div class="develop-item">
            <div class="develop-title">
              1.您的企业是否工商、税务、统计关系在江西省，具有法人资格并实行独立核算？
            </div>
            <el-form-item prop="declareType" label-width="0">
              <el-select v-model="form.bussiness" class="w-full">
                <el-option
                  v-for="item in simpleTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="develop-item">
            <div class="develop-title">
              2.您的企业是否有违法记录，不良信用记录或近三年有重大安全事故、重大环境污染事件？
            </div>
            <el-form-item prop="declareType" label-width="0">
              <el-select v-model="form.safe" class="w-full">
                <el-option
                  v-for="item in simpleTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="develop-item" style="margin-bottom: 22px">
            <div class="develop-title">3.企业发展情况</div>
            <div
              class="flex items-center border rounded-md"
              style="height: 2.5rem"
            >
              <div
                class="px-4 text-gray-600 bg-gray-100 rounded-l-md"
                style="height: 2.5rem; line-height: 2.5rem; width: 15%"
              >
                企业成立时间
              </div>
              <el-form-item
                prop="buildTime"
                label-width="0"
                style="margin: 0; width: 85%"
              >
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  placeholder="选择时间"
                  v-model="form.buildTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </div>
            <div class="flex justify-between mt-6">
              <table class="self-table" style="width: 48%">
                <tr class>
                  <th colspan="3">
                    <div class="table-head" style="width: 100%">
                      近四年营业收入
                    </div>
                  </th>
                </tr>
                <tr v-for="yearItem in saleInfo" :key="yearItem.year">
                  <td style="width: 5rem">{{ yearItem.year }}</td>
                  <td>
                    <el-form-item
                      :error="judgeNum(yearItem.money)"
                      label-width="0"
                      style="margin: 10px 0"
                    >
                      <el-input-number
                        v-model="yearItem.money"
                        :min="0"
                        size="lager"
                      ></el-input-number>
                    </el-form-item>
                  </td>
                  <td style="min-width: 2rem">万元</td>
                </tr>
                <!-- <tr>
                  <td :colspan="2">复合增长率（%）</td>
                  <td>{{ salePercent(4) }}</td>
                </tr> -->
              </table>

              <table class="self-table" style="width: 48%">
                <tr class>
                  <th colspan="3">
                    <div class="table-head" style="width: 100%">
                      近四年员工总数
                    </div>
                  </th>
                </tr>
                <tr v-for="yearItem in staffInfo" :key="yearItem.year">
                  <td style="width: 5rem">{{ yearItem.year }}</td>
                  <td>
                    <el-form-item
                      :error="judgeNum(yearItem.num)"
                      label-width="0"
                      style="margin: 10px 0"
                    >
                      <el-input-number
                        v-model="yearItem.num"
                        :min="0"
                        size="lager"
                      ></el-input-number>
                    </el-form-item>
                  </td>
                  <td style="min-width: 2rem">名</td>
                </tr>
                <!-- <tr>
                  <td :colspan="2">复合增长率（%）</td>
                  <td>
                    {{ staffPercent }}
                  </td>
                </tr> -->
              </table>
            </div>
          </div>

          <div class="develop-item">
            <div class="develop-title">4.企业创新情况</div>
            <table class="self-table w-full">
              <tr class>
                <th colspan="3">
                  <div class="table-head w-full">近四年R&D研发投入</div>
                </th>
              </tr>
              <tr v-for="yearItem in developSaleInfo" :key="yearItem.year">
                <td style="width: 8rem">{{ yearItem.year }}</td>
                <td>
                  <el-form-item
                    :error="judgeNum(yearItem.money)"
                    label-width="0"
                    style="margin: 10px 0"
                  >
                    <el-input-number
                      v-model="yearItem.money"
                      :min="0"
                      size="lager"
                    ></el-input-number>
                  </el-form-item>
                </td>
                <td style="min-width: 2rem">万元</td>
              </tr>
              <!-- <tr>
              <td :colspan="2">
                复合增长率（%）
              </td>
              <td>
                {{ developSalePercent }}
              </td>
            </tr>-->
            </table>
          </div>

          <el-form-item class="mt-24" label-width="0">
            <div class="confirm-btn" @click="submitForm('evaluaForm')">
              立即提交
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import userMixin from "../personCenter/mixin.js";

export default {
  mixins: [userMixin],
  components: {},
  data() {
    /**
     * 校验当前对象是否已经填入信息，如果没有填入信息，则使用顶部弹窗提示用户
     */
    var checkRequiredBuildTime = (rule, value, callback) => {
      if (
        value === undefined ||
        value === null ||
        value === "" ||
        value.length < 1
      ) {
        this.$message({
          showClose: true,
          type: "error",
          message: "企业发展情况为必填项，请选择以后再重试操作",
        });
        return callback(new Error("请选择企业成立时间"));
      } else {
        return callback();
      }
    };

    return {
      defaultYear: 2021,
      globalError: false,
      isMatchResShow: false,
      matchSucess: false,
      resRuleName: "",
      form: {
        bussiness: "1",
        safe: "1",
        buildTime: "",
      },
      rules: {
        buildTime: [{ required: true, validator: checkRequiredBuildTime }],
      },
      bussinessTypeList: [
        {
          dictLabel: "是",
          dictValue: "1",
        },
      ],
      simpleTypeList: [
        {
          dictLabel: "是",
          dictValue: "1",
        },
        {
          dictLabel: "否",
          dictValue: "0",
        },
      ],
      saleInfo: [
        {
          year: 2019,
          money: 0,
        },
        {
          year: 2020,
          money: 0,
        },
        {
          year: 2021,
          money: 0,
        },
        {
          year: 2022,
          money: 0,
        },
      ],

      staffInfo: [
        {
          year: 2019,
          num: 0,
        },
        {
          year: 2020,
          num: 0,
        },
        {
          year: 2021,
          num: 0,
        },
        {
          year: 2022,
          num: 0,
        },
      ],

      developSaleInfo: [
        {
          year: 2019,
          money: 0,
        },
        {
          year: 2020,
          money: 0,
        },
        {
          year: 2021,
          money: 0,
        },
        {
          year: 2022,
          money: 0,
        },
      ],
      checkForm: {
        bussiness: {
          uid: 1,
          vv: 1,
          name: "工商、税务、统计关系在江西省，具有法人资格并实行独立核算",
        },
        safe: {
          uid: 2,
          vv: 0,
          name: "无违法记录，无不良信用记录，近三年无重大安全事故、重大环境污染事件。",
        },
        saleInfo: {
          uid: 3,
          vv: 1,
          name: "",
        },
        salePercent: {
          uid: 4,
          vv: 1,
          name: "",
        },
        staffInfo: {
          uid: 5,
          vv: 1,
          name: "",
        },
        staffPercent: {
          uid: 6,
          vv: 1,
          name: "",
        },
        buildTime: {
          uid: 7,
          vv: 1,
          name: "",
        },
        growRate: {
          uid: 8,
          vv: 1,
          name: "",
        },
        developRateSale: {
          uid: 9,
          vv: 1,
          name: "",
        },
      },
      ruleList: [
        {
          ruleName: "rule1",
          title: "瞪羚企业",
        },
        {
          ruleName: "rule2",
          title: "瞪羚企业",
        },
        {
          ruleName: "rule3",
          title: "瞪羚企业",
        },
        {
          ruleName: "rule4",
          title: "瞪羚企业",
        },
        {
          ruleName: "rule5",
          title: "潜在瞪羚企业",
        },
        {
          ruleName: "rule6",
          title: "潜在瞪羚企业",
        },
        {
          ruleName: "rule7",
          title: "潜在瞪羚企业",
        },
        {
          ruleName: "rule8",
          title: "潜在瞪羚企业",
        },
      ],
      baseRule: {
        bussiness: {
          uid: 1,
          vv: "1",
          name: "工商、税务、统计关系在江西省，具有法人资格并实行独立核算",
        },
        safe: {
          uid: 2,
          vv: "0",
          name: "无违法记录，无不良信用记录，近三年无重大安全事故、重大环境污染事件。",
        },
      },
      rule1: {
        salePercent: {
          uid: 4,
          vv: 20,
          yearLength: 4,
          name: `${new Date().getFullYear() - 4}-${
            new Date().getFullYear() - 1
          }年营业收入复合增长率≥20%`,
        },
        buildTime: {
          uid: 7,
          vv: new Date().getFullYear() - 4 - 10 + "-01-01",
          name: `企业于${
            new Date().getFullYear() - 4 - 10
          }年1月1日（含）之后注册`,
        },
        saleInfo: {
          uid: 3,
          yearIndex: 0,
          vv: 1000,
          name: `${new Date().getFullYear() - 4}营业收入≥1000万元`,
        },
        developRateSale: {
          uid: 9,
          rateYearLength: 4,
          vv: 0.025,
          name: `${new Date().getFullYear() - 4} -${
            new Date().getFullYear() - 1
          }  年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%`,
        },
      },
      rule2: {
        buildTime: {
          uid: 7,
          vv: new Date().getFullYear() - 4 - 10 + "-01-01",
          name: `企业于${
            new Date().getFullYear() - 4 - 10
          }年1月1日（含）之后注册`,
        },
        staffInfo: {
          uid: 5,
          yearIndex: 0,
          vv: 100,
          name: `${new Date().getFullYear() - 4}雇员人数≥100人`,
        },
        staffPercent: {
          uid: 6,
          vv: 30,
          name: `${new Date().getFullYear() - 4}-${
            new Date().getFullYear() - 1
          }雇员人数复合增长率≥30%`,
        },
        developRateSale: {
          uid: 9,
          rateYearLength: 4,
          vv: 0.025,
          name: `${new Date().getFullYear() - 4} -${
            new Date().getFullYear() - 1
          }  年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%`,
        },
      },
      rule3: {
        buildTime: {
          uid: 7,
          vv: new Date().getFullYear() - 4 + "-01-01",
          name: `企业于${new Date().getFullYear() - 4}年1月1日（含）之后注册`,
        },
        saleInfo: {
          uid: 3,
          yearIndex: 3,
          vv: 50000,
          name: `${new Date().getFullYear() - 1}年营业收入≥5亿元`,
        },
        developRateSale: {
          uid: 9,
          rateYearLength: 4,
          vv: 0.025,
          name: `${new Date().getFullYear() - 4} -${
            new Date().getFullYear() - 1
          }  年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%`,
        },
      },
      rule4: {
        buildTime: {
          uid: 7,
          vv: new Date().getFullYear() - 4 - 5 + "-01-01",
          name: `企业于${new Date().getFullYear() - 4}年1月1日（含）之后注册`,
        },
        saleInfo: {
          uid: 3,
          yearIndex: 3,
          vv: 100000,
          name: `${new Date().getFullYear() - 1}年营业收入≥10亿元`,
        },
        developRateSale: {
          uid: 9,
          rateYearLength: 4,
          vv: 0.025,
          name: `${new Date().getFullYear() - 4} -${
            new Date().getFullYear() - 1
          }  年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%`,
        },
      },
      rule5: {
        buildTime: {
          uid: 7,
          vv: new Date().getFullYear() - 4 - 5 + "-01-01",
          name: `企业于${new Date().getFullYear() - 9}年1月1日（含）之后注册`,
        },
        saleInfo: {
          uid: 3,
          yearIndex: 1,
          vv: 500,
          name: `${new Date().getFullYear() - 3}年营业收入≥500万元`,
        },
        salePercent: {
          uid: 4,
          vv: 20,
          yearLength: 3,
          name: `${new Date().getFullYear() - 4}-${
            new Date().getFullYear() - 1
          }年营业收入复合增长率≥20%`,
        },
        developRateSale: {
          uid: 9,
          rateYearLength: 3,
          vv: 0.025,
          name: `${new Date().getFullYear() - 3} -${
            new Date().getFullYear() - 1
          }  年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%`,
        },
      },
      rule6: {
        buildTime: {
          uid: 7,
          vv: new Date().getFullYear() - 9 + "-01-01",
          name: `企业于${new Date().getFullYear() - 9}年1月1日（含）之后注册`,
        },
        staffInfo: {
          uid: 5,
          yearIndex: 1,
          vv: 50,
          name: `${new Date().getFullYear() - 3}雇员人数≥50人`,
        },
        staffPercent: {
          uid: 6,
          vv: 30,
          yearLength: 3,
          name: `${new Date().getFullYear() - 3}-${
            new Date().getFullYear() - 1
          }雇员人数复合增长率≥30%`,
        },
        developRateSale: {
          uid: 9,
          rateYearLength: 3,
          vv: 0.025,
          name: `${new Date().getFullYear() - 3} -${
            new Date().getFullYear() - 1
          }  年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%`,
        },
      },
      rule7: {
        buildTime: {
          uid: 7,
          vv: new Date().getFullYear() - 3 + "-01-01",
          name: `企业于${new Date().getFullYear() - 3}年1月1日（含）之后注册`,
        },
        saleInfo: {
          uid: 3,
          yearIndex: 3,
          vv: 10000,
          name: `${new Date().getFullYear() - 1}年营业收入≥1亿元`,
        },
        developRateSale: {
          uid: 9,
          rateYearLength: 3,
          vv: 0.025,
          name: `${new Date().getFullYear() - 3} -${
            new Date().getFullYear() - 1
          }  年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%`,
        },
      },
      rule8: {
        buildTime: {
          uid: 7,
          vv: new Date().getFullYear() - 5 + "-01-01",
          name: `企业于${new Date().getFullYear() - 5}年1月1日（含）之后注册`,
        },
        saleInfo: {
          uid: 3,
          yearIndex: 3,
          vv: 10000,
          name: `${new Date().getFullYear() - 3}年营业收入≥1亿元`,
        },
        developRateSale: {
          uid: 9,
          rateYearLength: 3,
          vv: 0.025,
          name: `${new Date().getFullYear() - 3} -${
            new Date().getFullYear() - 1
          }  年平均研究与试验发展（R&D）投入强度（即R&D经费占营业收入的比例）≥2.5%`,
        },
      },
    };
  },
  computed: {
    filterCheckForm() {
      let resObj = {};
      for (const key in this.checkForm) {
        if (Object.hasOwnProperty.call(this.checkForm, key)) {
          const element = this.checkForm[key];
          if (element.name) {
            resObj[key] = element;
          }
        }
      }
      // return resObj;

      /** 将指定的某些数据聚合在一起输出 */
      // 从处理好的数据内过滤出需要的数据
      let filterObj = {};
      Object.keys(resObj)
        .filter((key) => {
          return (
            key != "bussiness" &&
            key != "safe" &&
            key != "developRateSale" &&
            key != "buildTime"
          );
        })
        .forEach((key) => {
          filterObj[key] = resObj[key];
        });

      // 判断，如果企业的创建时间小于三年，则为潜在瞪羚企业的判断标准
      let nowTime = new Date().getTime();
      let companyBuildTime = new Date(this.form.buildTime).getTime();

      // 建立一个数组变量 用于存储当前对象内所有的vv属性
      let vvArr = [];
      // 循环对象
      Object.values(filterObj).forEach((item) => {
        vvArr.push(item.vv);
      });
      // 对这个数据进行判断，如果当前规则内的剩余数据没有全部通过判断，则返回false
      let result = vvArr.every((item) => {
        return item == true;
      });

      // 保存将要输出的内容
      let objName = "";
      // 判断时间是否超过三年
      if (
        Math.abs(companyBuildTime - nowTime) >
        3 * 365 * 24 * 60 * 60 * 1000
      ) {
        // 潜在瞪羚
        // 将当前的处理结果赋到一个新值内
        objName = `<div class="pr-20">
                    <div>（1）增长率条件（需满足以下条件之一）</div>
                    <div class="pl-4 text-t666">
                      <div>
                        ①企业于2006年1月1日（含）之后注册，2016年营业收入≥1000万元，2016-2019年营业收入复合增长率≥20%，且2019年度正增长；
                      </div>
                      <div>
                        ②企业于2006年1月1日（含）之后注册，2016年雇员人数≥100人，2016-2019年雇员人数复合增长率≥30%，且2019年度正增长；
                      </div>
                      <div>
                        ③企业于2016年1月1日（含）之后注册，2019年营业收入≥5亿元，且2019年度正增长；
                      </div>
                      <div>
                        ④企业于2011年1月1日（含）之后注册，且2019年营业收入≥10亿元，且2019年度正增长。
                      </div>
                    </div>
                  </div>`;
      } else {
        // 瞪羚企业
        // 将当前的处理结果赋到一个新值内
        objName = `<div class="pr-20">
                    <div>（1）增长率条件（需满足以下条件之一）</div>
                      <div class="pl-4 text-t666">
                        <div>
                          ①企业于2011年1月1日（含）之后注册，2017年营业收入≥500万，2017-2019年营业收入复合增长率≥20%，且2019年度正增长；
                        </div>
                        <div>
                          ②企业于2011年1月1日（含）之后注册，2017年雇员人数≥50人，2017-2019年雇员总数复合增长率≥30%，且2019年度正增长；
                        </div>
                        <div>
                          ③企业于2018年1月1日（含）之后注册，且2019年营业收入≥1亿元，且2019年度正增长；
                        </div>
                        <div>
                          ④企业于2016年1月1日（含）之后注册，且2019年营业收入≥3亿元，且2019年度正增长。
                        </div>
                      </div>
                    </div>`;
      }
      resObj["comprehensive"] = {
        uid: 100,
        name: objName,
        vv: result,
      };
      /** END */

      // 筛选出指定的数据
      let {
        saleInfo,
        salePercent,
        staffInfo,
        staffPercent,
        buildTime,
        growRate,
        ...obj
      } = resObj;

      let resArr = Object.values(obj);
      // 数组内的两个元素对调位置
      resArr = this.swapArr(resArr, 2, 3);

      // 按照之前的方案循环验证通用字段内是否有不符合条件的
      this.matchSucess = resArr.every((item) => {
        if (item.vv) {
          return true;
        } else {
          return false;
        }
      });

      return resArr;
    },
    salePercent() {
      return (length) => {
        length = length || this.saleInfo.length;
        let endIndex = this.saleInfo.length;
        let startIndex = endIndex - length;
        return this.GAGR(this.saleInfo, startIndex);
      };
    },
    staffPercent() {
      return this.GAGR(this.staffInfo);
    },
    developSalePercent() {
      return this.GAGR(this.developSaleInfo);
    },
    matchHeadObj() {
      let ruleItem = this.ruleList.find((item) => {
        return item.ruleName === this.resRuleName;
      });
      let res = {
        icon: "el-icon-error",
        color: "text-red-400",
        title: ruleItem.title,
        isSucess: "不符合",
      };
      if (this.matchSucess) {
        res.icon = "el-icon-success";
        res.color = "text-green-400";
        res.isSucess = "符合";
      }
      return res;
    },
    matchResObj() {
      return (isSucess) => {
        let res = {
          icon: "el-icon-success",
          color: "text-green-400",
          title: "符合",
        };
        if (!isSucess) {
          res.color = "text-red-400";
          res.icon = "el-icon-error";
          res.title = "不符合";
        }
        return res;
      };
    },
  },
  created() {
    this.initYearForm();
  },
  methods: {
    // 数组内的两个元素对调位置
    swapArr(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },

    // 统计方法
    GAGR(list, startIndex, endIndex) {
      startIndex = startIndex || 0;
      endIndex = endIndex || list.length - 1;
      let firstV = list[startIndex]["money"] || list[startIndex]["num"];
      let lastV = list[endIndex]["money"] || list[endIndex]["num"];

      if (firstV === 0 || lastV === 0) {
        return 0;
      }
      let res = 0;

      res =
        (Math.pow(lastV / firstV, 1 / (endIndex - startIndex + 1)) - 1) * 100;
      return res ? res.toFixed(1) : 0;
    },
    hiddenMatchRes() {
      this.isMatchResShow = false;
      // this.matchSucess = false
      // 将页面返回顶部
      window.scrollTo(0, 0);
    },
    submitForm(formName) {
      if (this.globalError) {
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          for (let index = 0; index < this.ruleList.length; index++) {
            const ruleName = this.ruleList[index]["ruleName"];
            let rules = this[ruleName];
            let resRuleName = this.checkFormContent(rules, ruleName);
            if (resRuleName) {
              this.resRuleName = resRuleName;
              break;
            } else {
              this.resRuleName = ruleName;
            }
          }
          this.isMatchResShow = true;
          // 将页面返回顶部
          window.scrollTo(0, 0);
        }
      });
    },
    initYearForm() {
      let nowYear = new Date().getFullYear();
      let yearLength = this.saleInfo.length;
      for (let index = yearLength - 1; index >= 0; index--) {
        this.saleInfo[index]["year"] = nowYear;
        this.staffInfo[index]["year"] = nowYear;
        this.developSaleInfo[index]["year"] = nowYear;
        nowYear--;
      }
    },
    /**
     * @param       [Object] ruleObj
     * @description 使用 ruleObj 规则 检验 this.form 是否符合规则,符合返回 规则名称
     * @return      ruleName
     */
    checkFormContent(ruleObj, ruleName) {
      let rule = { ...ruleObj, ...this.baseRule };
      let formContent = this.form;

      // 企业成立时间
      let buildTimeValue = new Date(formContent.buildTime).valueOf();
      let ruleTimeValue = new Date(rule.buildTime.vv).valueOf();

      if (buildTimeValue > ruleTimeValue) {
        this.checkForm.buildTime.vv = 1;
      } else {
        this.checkForm.buildTime.vv = 0;
      }
      this.checkForm.buildTime.name = rule.buildTime.name;

      // 工商
      if (rule.bussiness.vv === formContent.bussiness) {
        this.checkForm.bussiness.vv = 1;
      } else {
        this.checkForm.bussiness.vv = 0;
      }

      // 无违法记录
      if (rule.safe.vv === formContent.safe) {
        this.checkForm.safe.vv = 1;
      } else {
        this.checkForm.safe.vv = 0;
      }

      // 2021年度正增长
      if (
        this.saleInfo[this.saleInfo.length - 1].money >
        this.saleInfo[this.saleInfo.length - 2].money
      ) {
        this.checkForm.growRate.vv = 1;
        // 将之前放在规则内的name放在此处赋值
        this.checkForm.growRate.name = `${new Date().getFullYear() - 1} 年度正增长`;
      } else {
        this.checkForm.growRate.vv = 0;
      }
      // 增加标识符
      this.checkForm.growRate.uid = 8;

      // XX年营业收入大于
      if (rule.saleInfo) {
        let saleIndex = rule.saleInfo.yearIndex;
        this.checkForm.saleInfo.vv = 0;

        if (rule.saleInfo.vv <= this.saleInfo[saleIndex].money) {
          this.checkForm.saleInfo.vv = 1;
        }
        this.checkForm.saleInfo.name = rule.saleInfo.name;
      } else {
        this.checkForm.saleInfo.vv = -1;
        this.checkForm.saleInfo.name = "";
      }
      // 增加标识符
      this.checkForm.saleInfo.uid = 3;

      // 年度复合增长率
      if (rule.salePercent) {
        let yearLength = rule.salePercent.yearLength;
        this.checkForm.salePercent.vv = 0;

        if (rule.salePercent.vv <= this.salePercent(yearLength)) {
          this.checkForm.salePercent.vv = 1;
        }
        this.checkForm.salePercent.name = rule.salePercent.name;
      } else {
        this.checkForm.salePercent.vv = -1;
        this.checkForm.salePercent.name = "";
      }
      // 增加标识符
      this.checkForm.salePercent.uid = 4;

      // XX年雇员人数 大于
      if (rule.staffInfo) {
        let saleIndex = rule.staffInfo.yearIndex;
        this.checkForm.staffInfo.vv = 0;

        if (rule.staffInfo.vv <= this.staffInfo[saleIndex].num) {
          this.checkForm.staffInfo.vv = 1;
        }
        this.checkForm.staffInfo.name = rule.staffInfo.name;
      } else {
        this.checkForm.staffInfo.vv = -1;
        this.checkForm.staffInfo.name = "";
      }
      // 增加标识符
      this.checkForm.staffInfo.uid = 5;

      // 雇员人数复合增长率
      if (rule.staffPercent) {
        this.checkForm.staffPercent = this.checkStaffPercent(rule.staffPercent);
      } else {
        this.checkForm.staffPercent.vv = -1;
        this.checkForm.staffPercent.name = "";
      }
      // 增加标识符
      this.checkForm.staffPercent.uid = 6;

      if (rule.developRateSale) {
        let devRateSaleRes = this.checkDeveRateSale(rule.developRateSale);
        this.checkForm.developRateSale = devRateSaleRes;
      } else {
        this.checkForm.developRateSale.vv = -1;
        this.checkForm.developRateSale.name = "";
      }
      // 增加标识符
      this.checkForm.developRateSale.uid = 9;

      return this.checkFormSucess(ruleName, rule);
    },

    //
    /**
     * @function      checkDeveRateSale
     * @params        [Object] ruleObj  (ruleObj 规则条件)
     * @description   检测创新能力条件
     * @return        [Object] res      (返回校验规则的结果)
     */
    checkDeveRateSale(ruleObj) {
      let res = {};
      let rateYearLength = ruleObj.rateYearLength;
      let sumSale = 0;
      let sumDevelop = 0;
      for (let index = rateYearLength - 1; index > 0; index--) {
        sumSale += this.saleInfo[index].money;
        sumDevelop += this.developSaleInfo[index].money;
      }
      if (sumDevelop && sumSale && sumDevelop / sumSale > ruleObj.vv) {
        res.vv = 1;
      } else {
        res.vv = 0;
      }

      res.name = ruleObj.name;
      return res;
    },

    //
    /**
     * @function      checkStaffPercent
     * @params        [Object] ruleObj  (ruleObj 规则条件)
     * @description   雇员人数复合增长率
     * @return        [Object] res      (返回校验规则的结果)
     */
    checkStaffPercent(ruleObj) {
      let res = {};
      res.vv = 0;
      if (ruleObj.vv <= this.staffPercent) {
        res.vv = 1;
      }
      res.name = ruleObj.name;
      return res;
    },

    /**
     * @description 对于检测结果是否都符合条件，都符合条件返回 规则名称 ruleName
     * @return      ruleName ( 在 this  中的属性名 )
     */
    checkFormSucess(ruleName, rule) {
      // let checkFormKeys = Object.keys(this.checkForm);
      let checkFormKeys = Object.keys(rule);

      // 通用判断字段
      let commonCheck = ["bussiness", "safe", "developRateSale"];
      // 从处理好的数据内过滤出需要的数据
      let filterArr = checkFormKeys.filter((key) => {
        return (
          key != "bussiness" &&
          key != "safe" &&
          key != "developRateSale" &&
          key != "buildTime"
        );
      });

      // 然后再检查筛选出来的数据是否符合条件, 对这个数据进行判断，如果里面的vv属性任意一个为false，则说明没有通过此规则判断
      let result = filterArr.every((item) => {
        return this.checkForm[item].vv == true;
      });
      if (!result) {
        return false;
      } else {
        return ruleName;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 18.75rem;
  background: linear-gradient(316deg, #1e57f9 0%, #040bd2 100%);
}

.develop-title {
  &::before {
    content: "*";
    @apply text-red-400 font-bold pr-1;
  }

  @apply text-lg text-t666 pb-6;
}

.self-table {
  // height: 144px;
  overflow: hidden;

  .xs-table-head,
  .sm-table-head,
  .table-head {
    // width: 289px;

    background: #f3f3f3;
    line-height: 36px;

    @apply text-t666 text-center;
  }

  .sm-table-head {
    // width: 12rem;
  }

  .xs-table-head {
    // width: 8rem;
    height: 3rem;
    line-height: 3rem;
  }

  td {
    @apply p-2 border text-center;
  }

  tr,
  th {
    @apply border py-2;
  }

  th {
    background: #f3f3f3;
    @apply text-t666 text-center px-4;
  }
}

.match-sucess,
.match-error {
  @apply border-t-4 border-blue-500 p-6 mt-10 shadow-md;

  .title {
    @apply text-xl font-bold;
  }

  .match-content {
    min-height: 230px;
    height: 230px;
    @apply flex flex-col justify-center items-center text-t333 text-xl;
  }
}

/** 顶部标题样式 */
.head-title {
  @apply relative pl-3;

  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 2px;
    left: -1px;
    width: 3px;
    height: 46px;
    background: #3378fc;
  }
}
</style>
